<template>
  <div>
    <div>
      <!-- Container 布局容器
        <el-container>：外层容器
        <el-header>：顶栏容器。
      -->
      <el-container>
        <el-header>
           <!-- Layout 布局
            通过基础的 24 分栏，迅速简便地创建布局。
              通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。
           -->
          <el-row>
            <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
          </el-row>

          <el-row>
            <el-col :span="8">
              <el-input v-model="input" placeholder="请输入类别编码或名称"></el-input>
            </el-col>
            <el-col :span="4">
              <el-button type="primary" @click="selectSettle()">查询结算类别</el-button>
            </el-col>
            <el-col :span="6">
              <!-- 新增结算类别触碰点击事件 -->
              <el-button type="primary" @click="dialogVisible = true">新增结算类别</el-button>
            </el-col>
            <!-- 当dialogVisible = true，弹出窗体显示内容 -->
            <el-dialog :visible.sync="dialogVisible">
              <span>新增结算类别信息</span>
              <el-form :model="addSettleForm">
                <el-form-item label="类别编码:" >
                  <el-input v-model="addSettleForm.settleCode"></el-input>
                </el-form-item>
              </el-form>
              <el-form :model="addSettleForm">
                <el-form-item label="类别名称: " >
                  <el-input v-model="addSettleForm.settleName"></el-input>
                </el-form-item>
              </el-form>
              <el-form :model="addSettleForm">
                <el-form-item label="显示顺序号: " >
                  <el-input v-model="addSettleForm.sequenceNo"></el-input>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="addNewSettle()">保 存</el-button>
              </span>
            </el-dialog>
          </el-row>
        </el-header>
      </el-container>
    </div>
  <div>
    <el-container>
      <el-header>
        <el-row>
          <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
        </el-row>
        <el-row>
          <el-col :span="1">
            <!-- `checked` 为 true 或 false -->
            <el-checkbox v-model="checked">备选项</el-checkbox>
          </el-col>

          <el-table :data="msg" style="width: 100%">
            <el-col :span="5">
            <el-table-column label="显示顺序号" width="180">
              <template slot-scope="scope">
                <i class="el-icon-date"></i>
                <span style="margin-left: 10px">{{ scope.row.sequenceNo }}</span>
              </template>
            </el-table-column>
            </el-col>
            <el-col :span="6">
            <el-table-column label="类别编码" width="180">
              <template slot-scope="scope">
                <i class="el-icon-document-add"></i>
                <span style="margin-left: 10px">{{ scope.row.settleCode }}</span>
              </template>
            </el-table-column>
            </el-col>
            <el-col :span="6">
            <el-table-column label="类别名称" width="180">
              <template slot-scope="scope">
                <i class="el-icon-edit"></i>
                <span style="margin-left: 10px">{{ scope.row.settleName }}</span>
              </template>
            </el-table-column>
            </el-col>
            <el-col :span="6">
            <el-table-column label="操作">
              <template slot-scope="scope"><i class="el-icon-edit-outline"></i>
                <el-button size="mini" @click="handleEdit = true">编辑</el-button>
                <!-- 当dialogVisible = true，弹出窗体显示内容 -->
                <el-dialog :visible.sync="handleEdit">
                  <span>修改结算类别信息</span>
                  <el-form :model="selectSettleForm">
                    <el-form-item label="类别编码:" >
                      <el-input v-model="selectSettleForm.settleCode"></el-input>
                    </el-form-item>
                  </el-form>
                  <el-form :model="selectSettleForm">
                    <el-form-item label="类别名称: " >
                      <el-input v-model="selectSettleForm.settleName"></el-input>
                    </el-form-item>
                  </el-form>
                  <el-form :model="selectSettleForm">
                    <el-form-item label="显示顺序号: " >
                      <el-input v-model="selectSettleForm.sequenceNo"></el-input>
                    </el-form-item>
                  </el-form>
                  <span slot="footer" class="dialog-footer">
                      <el-button @click="handleEdit = false">取 消</el-button>
                      <el-button type="primary" @click="updateSettle()">修 改</el-button>
                  </span>
                </el-dialog>
                <el-button size="mini" type="danger"@click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
            </el-col>
          </el-table>
        </el-row>
      </el-header>
    </el-container>
  </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        input: '',
        checked: true,
        dialogVisible:false,
        dialogVisible:false,
        addSettleForm:{
          settleCode:'',//类别编码
          settleName:'',//类别名称
          sequenceNo:'',//显示顺序号
        },
        handleEdit:false,
        selectSettleForm:{
          settleCode:'',//类别编码
          settleName:'',//类别名称
          sequenceNo:'',//显示顺序号
        },
        msg:[
          /* {
            sequenceNo:'1',//显示顺序号
            settleCode:'abcd',//类别编码
            settleName:'自费',//类别名称
          } */
        ]
      }
    },
    methods: {
      addNewSettle(){
        this.$axios.post("/neuhis/settle/queryAllSettle",this.addSettleForm).then(response =>{
          console.log(response);
        });
        this.dialogVisible = false;
      },
      updateSettle(){
        this.$axios.get("/neuhis/settle/update").then(response =>{
          console.log(response);
        });
        this.handleEdit = false;
      },
      selectSettle(){
        this.$axios.get("/neuhis/settle/selectSettle").then(response =>{
          console.log(response);
        });
      },
      handleDelete(index,row){
        let _this = this;
        this.$axios.get("/neuhis/user/deleteSettle",{
          params:{
            id:this.msg[index].id
          }
        })
        .then(response =>{
          alert("OK");
        });
      }
    }
  }
  </script>

<style>
</style>
